<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="UTF-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>青芽医疗管理平台</title>
    <meta content="数据采集分析系统" name="description">
    <meta content="数据采集分析系统" name="keywords">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link href="element-ui/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<body class="hold-transition">

<div id="app">
    <div class="filter-container">
        <el-input class="filter-item" placeholder="房间名称" style="width: 200px;" v-model="pagination.queryName"></el-input>
        <el-select clearable="true" placeholder="科室" v-model="pagination.departmentId">
            <el-option
                    :key="item.departmentId"
                    :label="item.departmentName"
                    :value="item.departmentId"
                    v-for="item in departmentList">
            </el-option>
        </el-select>
        <el-button @click="_getRoomPage()" class="dalfBut">查询</el-button>
        <el-button @click="handleAdd()" class="butT" type="primary">新建房间</el-button>
    </div>

    <el-table :data="list" current-row-key="departmentId" highlight-current-row size="small" stripe>
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="房间名称" prop="roomNumber"></el-table-column>
        <el-table-column align="center" label="房间地址" prop="roomAddress"></el-table-column>
        <el-table-column align="center" label="科室名称" prop="departmentName"></el-table-column>
        <el-table-column align="center" label="状态" prop="status"></el-table-column>
        <el-table-column align="center" label="操作" width="150">
            <template slot-scope="scope">
                <el-button @click="handleUpdate(scope.row)" size="mini" type="primary">编辑</el-button>
                <el-button @click="delRoom(scope.row)" size="mini" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination-container">
        <el-pagination
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                @current-change="handleCurrentChange"
                class="pagiantion"
                layout="total, prev, pager, next, jumper">
        </el-pagination>
    </div>

    <div class="add-form">
        <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="添加房间" width="360px">
            <el-form :model="room" label-position="right" label-width="100px" ref="dataEditForm">
                <el-row>
                    <el-form-item label="房间号" prop="roomNumber">
                        <el-input v-model="room.roomNumber"/>
                    </el-form-item>
                    <el-form-item label="房间地址" prop="roomAddress">
                        <el-input v-model="room.roomAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="科室" prop="departmentId">
                        <el-select v-model="room.departmentId" placeholder="请选择">
                            <el-option
                                    v-for="item in departmentList"
                                    :key="item.departmentId"
                                    :label="item.departmentName"
                                    :value="item.departmentId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button @click="addRoom()" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>

    <div class="add-form">
        <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible4Edit" title="编辑房间" width="360px">
            <el-form :model="room" label-position="right" label-width="100px" ref="dataEditForm">
                <el-row>
                    <el-form-item label="房间号" prop="roomNumber">
                        <el-input v-model="room.roomNumber"/>
                    </el-form-item>
                    <el-form-item label="房间地址" prop="roomAddress">
                        <el-input v-model="room.roomAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="科室" prop="departmentId">
                        <el-select v-model="room.departmentId" placeholder="请选择">
                            <el-option
                                    v-for="item in departmentList"
                                    :key="item.departmentId"
                                    :label="item.departmentName"
                                    :value="item.departmentId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--<el-form-item label="状态" prop="status">
                        <el-select v-model="room.status" placeholder="请选择">
                            <el-option
                                    v-for="item in statusList"
                                    :key="item.statusId"
                                    :label="item.statusName"
                                    :value="item.statusId">
                            </el-option>
                        </el-select>
                    </el-form-item>-->
                </el-row>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                <el-button @click="updateRoom()" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>
</div>

</body>
<!-- 引入组件库 -->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/axios-0.18.0.js"></script>
<script type="application/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 10,//每页显示的记录数
                total: 0,//总记录数
                queryString: null//查询条件
            },
            statusList:[{statusId:"未使用",statusName:"未使用"},{statusId:"使用中",statusName:"使用中"}],
            list: [],
            room: {},
            departmentList:[],
            dialogFormVisible: false,
            dialogFormVisible4Edit: false,
        },
        mounted() {
            this.getRoomPage();
        },
        methods: {
            _getRoomPage() {
                this.pagination.currentPage = 1;
                this.getRoomPage();
            },
            getRoomPage() {
                //发送ajax请求，提交分页相关请求参数（页码、每页显示记录数、查询条件）
                var queryPageBean = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryTerm: {
                        roomNumber: this.pagination.queryName,
                        departmentId: this.pagination.departmentId,
                    }
                };
                axios.post("/room/getRoomPage", "queryPageBean=" + JSON.stringify(queryPageBean)).then((res) => {
                    this.list = res.data.list;
                    this.pagination.total = res.data.total;
                });
                axios.post("/department/getDepartmentList",).then((res) => {
                    this.departmentList = res.data;
                });
            },
            handleCurrentChange(currentPage) {
                //为模型数据赋值（当前页面）
                this.pagination.currentPage = currentPage;
                this.getRoomPage();
            },
            handleAdd() {
                this.room = {};
                this.dialogFormVisible = true;
            },
            addRoom() {
                axios.post('/room/addRoom', "room="+JSON.stringify(this.room)).then(res => {
                    this.dialogFormVisible = false;
                    if (res) {
                        this.$message({
                            type: 'success',
                            message: "添加成功"
                        });
                    } else {
                        this.$message.error("添加失败");
                    }
                    this.getRoomPage();
                });
            },
            handleUpdate(row) {
                this.dialogFormVisible4Edit = true;
                axios.get("/room/getById?id=" + row.roomId).then((res) => {
                    this.room = res.data;
                });
            },
            updateRoom() {
                this.$confirm("你确定要修改当前数据吗？", "提示", {//确认框
                    type: 'warning'
                }).then(() => {
                    axios.post("/room/updateRoom", "room="+JSON.stringify(this.room)).then((res) => {
                        if (res) {
                            this.$message({
                                type: 'success',
                                message: "修改成功"
                            });
                            this.getRoomPage();
                        } else {
                            this.$message.error("修改失败");
                        }
                    }).catch((r) => {
                        this.showMessage(r);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '操作已取消'
                    });
                }).finally(() => {
                    this.getRoomPage();
                    this.dialogFormVisible4Edit = false;
                });
            },
            delRoom(row) {
                this.$confirm("你确定要删除当前数据吗？", "提示", {//确认框
                    type: 'warning'
                }).then(() => {
                    //用户点击确定按钮，发送ajax请求，将检查项ID提交到Controller进行处理
                    axios.post("/room/delRoom", "room="+JSON.stringify(row)).then((res) => {
                        if (res.data) {
                            //执行成功
                            //弹出成功提示信息
                            this.$message({
                                type: 'success',
                                message: "删除成功"
                            });
                            //重新进行分页查询
                            this.getRoomPage();
                        } else {
                            //执行失败
                            this.$message.error("删除失败");
                        }
                    }).catch((r) => {
                        this.showMessage(r);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '操作已取消'
                    });
                });
            },
        }
    })
</script>
</html>